<template>
  <div id="app" :class="{'grid-layout': !isLargeLayout, 'large-layout': isLargeLayout}">
    <!-- 布局切换按钮 -->
    <div class="layout-switcher">
      <button @click="switchLayout('large')" :class="{active: isLargeLayout}" title="大图模式">
        <i class="icon-large"></i> 大图模式
      </button>
      <button @click="switchLayout('grid')" :class="{active: !isLargeLayout}" title="列表模式">
        <i class="icon-grid"></i> 列表模式
      </button>
    </div>

    <!-- 卡片容器 -->
    <div class="items-container">
      <div
        v-for="item in healthItems"
        :key="item.url"
        class="item"
        @click="selectItem(item)"
        :class="{'selected': selectedItem === item.url}"
      >
        <a :href="item.url" target="_blank" class="item-link">
          <img :src="item.image" :alt="item.title" class="item-image">
          <div class="item-content">
            <h3>{{ item.title }}</h3>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SixPage',
  data() {
    return {
      isLargeLayout: false,
      selectedItem: null,
      healthItems: [
        {
          title: "Taylor Swift",
          url: "http://www.baidu.com/link?url=FdOrIpPBqtv305lPqPKYZ9elB1skaJNI5ZKgCS3puQy-p5ekVdZgl_4YqumQTRkin6MfjBzJC33W0vGO7Fs3kK",
          image: "https://img2.baidu.com/it/u=3507288295,3413196929&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
        },
        {
          title: "Fearless",
          url: "http://www.baidu.com/link?url=hQ-IYY2sY08FGDlJ5wK_u4GR6Z__M-k3ff_MFch9ip8WQP-89e5bs97MMkutYqNz6TBrExjkJjolams41oJ4JK",
          image: "https://img2.baidu.com/it/u=260232995,2435410670&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"
        },
        {
          title: "speak now",
          url: "http://www.baidu.com/link?url=JlOu-ecjuqS3xRosS_zBfGfbUMKB2hxIkMJEvOjJ1JGCqC2NAl5169QKk3U4-dpT7uxUCEikd1zi4F1X-fFrSW5XE_y_1nIjqk220rXuif7",
          image: "https://img2.baidu.com/it/u=2945961149,1792162967&fm=253&fmt=auto&app=138&f=JPEG?w=801&h=500"
        },
        {
          title: "RED",
          url: "https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft13.baidu.com%2Fit%2Fu%3D375378453%2C158584414%26fm%3D225%26app%3D113%26f%3DJPEG%3Fw%3D4046%26h%3D2276%26s%3D23C2F1040C1735D40884889D03008087&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1749256737&t=952549bb8466e4eae3d7a2a4517a537c",
          image: "https://img2.baidu.com/it/u=3784827585,302107076&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
        },
        {
          title: "reputation",
          url: "https://www.baidu.com/link?url=M4LMeWrWUx0N94KuTGNB0QQ2VKVVPefdt9rmndbNe_N71rssNZYCPQSAPP4tVEpyiscE_tD9jDXObicOGfGKUq&wd=&eqid=f9808a8600004ce40000000268423681",
          image: "https://img1.baidu.com/it/u=673829179,3319970631&fm=253&fmt=auto&app=138&f=JPEG?w=508&h=500"
        },
        {
          title: "1989",
          url: "http://www.baidu.com/link?url=4wefySz9ldaI-RRM_Y7gZBtuvwoOjFynP5h7CzH1bLMom2zdODeSm5RvV0dbD1wD3TSgv7th2AXi0GjaSiq2wa",
          image: "https://img0.baidu.com/it/u=1109698482,3232470828&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
        },
        {
          title: "lover",
          url: "https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft14.baidu.com%2Fit%2Fu%3D358499220%2C4131856883%26fm%3D225%26app%3D113%26f%3DJPEG%3Fw%3D658%26h%3D370%26s%3D567839C408498AD4D85DD18F0300F081&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1749256737&t=b72542fe6f65e6cecf90b757b35e9e35",
          image: "https://img1.baidu.com/it/u=3854158648,4122714806&fm=253&fmt=auto&app=138&f=JPEG?w=801&h=500"
        },
        {
          title: "folklore",
          url: "http://www.baidu.com/link?url=0KYDmoT_6MBMUrAutiCigjp3KL5Y3otBsFqsvAUXxHQ2vAHxZhXBAEn6RD28hzKHwYSBD03JC11-xLP4M-Nvd_",
          image: "https://img0.baidu.com/it/u=3796802090,1642949296&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
        },
        {
          title: "evermore",
          url: "http://www.baidu.com/link?url=sQihz9dMntXx6G7nFUsJc7WwSilq9FezI-V3AD_s2eTvy7M5xSDvM-LqCwP4a9Ub-rh_fMnewbN58ZzYJwaTP_",
          image: "https://img1.baidu.com/it/u=3748805364,968323184&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        },
        {
          title: "Midnights",
          url: "http://www.baidu.com/link?url=IcE6FR458w9YsSMruAcFw2NOuqEMa1U25aChHmO5ehgv-vwZden5wg4ytjwdDS6SePpIGCuATWou4etIG9tCo7me8hFE8_xvPU7qvt9vuSG",
          image: "https://img2.baidu.com/it/u=245275743,2421457120&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
        },
        {
          title: "TTPD",
          url: "http://www.baidu.com/link?url=wMqmeY2FFXwO4VXxcZo3wbcaAmPajZzlhUYOH-zu6Kjwoc9k4DLuRyoqcWrw0YBjFEzuIeuZlNxdDCIkR-JtrK",
          image: "https://img1.baidu.com/it/u=3545247402,2900712220&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
        },
        {
          title: "You belong with me.",
          url: "https://t15.baidu.com/it/u=4074043809,1194601879&fm=225&app=113&size=f256,170&n=0&f=JPEG&fmt=auto?s=0921CF100B2670840188D1D5030090E1&sec=1749315600&t=ead30c5d6695d85e04bdbd528c936ac0",
          image: "https://t8.baidu.com/it/u=53347234,3569656800&fm=3035&app=3035&size=f242,162&n=0&g=0n&f=JPEG?s=CE738B54471053C2506DF5D70300C0A3&sec=1749257030&t=0830da125b47c78a22ac5663f7566b93"
        }
      ]
    };
  },
  methods: {
    switchLayout(mode) {
      this.isLargeLayout = mode === 'large';
    },
    selectItem(item) {
      this.selectedItem = item.url;
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  padding: 20px;
}

.layout-switcher {
  margin-bottom: 20px;
}

.layout-switcher button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.layout-switcher button.active {
  background-color: #0056b3;
}

/* 列表模式下的布局 */
.grid-layout .items-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 一行显示4个卡片 */
  gap: 20px; /* 卡片之间的间距 */
}

/* 每个卡片的基础样式 */
.item {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
  min-height: 250px; /* 确保有最小高度 */
}

.item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.item-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.item-content {
  padding: 15px;
}

.item-content h3 {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 1.4;
}
</style>